<!-- eslint-disable -->
<template>
  <div class="top-filter flex gap-x-4 gap-y-2 items-center">
    <template v-for="item in filters" :key="item.key">
      <el-input v-if="item.type === 'input'" class="w-[220px]" v-model="model[item.key]" clearable
        v-bind="composeProps(item)" @change="onChange" />
      <el-select v-else-if="item.type === 'select'" class="w-[220px]" v-model="model[item.key]" clearable
        v-bind="composeProps(item)" @change="onChange">
        <el-option v-for="option in item.options" :key="option[item.optionValueKey || 'value']"
          :label="option[item.optionLabelKey || 'label']" :value="option[item.optionValueKey || 'value']" />
      </el-select>
      <el-date-picker v-else-if="item.type === 'datepicker'" class="!flex-grow-0" v-model="model[item.key]"
        value-format="YYYY-MM-DD" start-placeholder="选择开始时间" end-placeholder="选择结束时间" :type="item.dateType || 'date'"
        v-bind="composeProps(item)" @change="onChange" />
      <template v-else-if="item.type === 'custom'">
        <component class="w-[220px]" :is="item.render" v-model="model[item.key]" v-bind="composeProps(item)" clearable
          @change="onChange"></component>
      </template>
    </template>
  </div>
</template>

<script setup>
const props = defineProps({
  model: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  filters: Array,
});
const emit = defineEmits(['change']);

const onChange = () => {
  emit('change', props.model);
};

// 合并普通props 和 动态props
const composeProps = (item) => {
  if (item.dynamicProps) {
    return {
      ...item.props,
      ...item.dynamicProps(props.model),
    }
  } else {
    return item.props;
  }
};
</script>

<style lang="scss" scoped>
.top-filter {

  :deep(.el-select) {
    --el-select-width: 220px;
  }

  :deep(.el-input) {
    --el-input-width: 220px;
  }
}
</style>